import { Form, Icon, Input, Button } from 'antd'
import React from 'react'

function hasErrors(fieldsError: any) {
  console.log('fieldsError', fieldsError)
  console.log(
    'Object.keys(fieldsError).some((field) => fieldsError[field])',
    Object.keys(fieldsError).some((field) => fieldsError[field])
  )

  return Object.keys(fieldsError).some((field) => fieldsError[field])
}

class Header extends React.Component {
  componentDidMount() {
    // To disable submit button at the beginning.
    this.props.form.validateFields()
    console.log('validateField触发了')
  }

  handleSubmit = (e: any) => {
    // console.log('e', e)

    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values)
      }
    })
    const getvalue = this.props.form.getFieldsValue()
    console.log('getvalue', getvalue)
  }

  render() {
    const {
      getFieldDecorator,
      getFieldsError,
      getFieldError,
      isFieldTouched,
      getFieldsValue,
      mapPropsToFields,
      onValuesChange,
    } = this.props.form
    console.log(this.props);
    const dis = true
    // Only show error after a field is touched.
    const usernameError =
      isFieldTouched('defineduser') && getFieldError('defineduser')
    const passwordError =
      isFieldTouched('definedpassword') && getFieldError('definedpassword')
    return (
      <Form layout="inline" onSubmit={this.handleSubmit}>
        <Form.Item
          validateStatus={usernameError ? 'error' : ''}
          help={usernameError || ''}
          >
          {/* 给每一个form item一个名称，比如defineduser */}
          {getFieldDecorator('defineduser', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
              />
          )}
        </Form.Item>
        <Form.Item
          validateStatus={passwordError ? 'error' : ''}
          help={passwordError || ''}
          >
          {getFieldDecorator('definedpassword', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"
              />
          )}
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            disabled={hasErrors(getFieldsError())}
            >
            Log in
          </Button>
        </Form.Item>
      </Form>
    )
  }
}

export default Form.create({
  name: 'horizontal_login',
  mapPropsToFields(props) {
    //这个函数的作用： 当组件初始化时就会触发这个函数。可以将组件的props值给到表单，作为初始值，这样表单就有值了
    console.log('mapPropsToFields',props)
    return {
      //key:field的名称， value: 通过 Form.createFormField，在组件初始化的时候field就有值
      defineduser: Form.createFormField({
        ...props.exampleField.name, //exampleField是通过props传递的
        value: props.exampleField.name,
      }),
    }
  },
  onFieldsChange(props, changedFields, allFields) {
    //页面记载好了就会触发，好像是有多少个filed就会触发几次
    console.log('onFieldsChange props', props) //App组件的props； 上有传递的props数据， form 的方法
    console.log('onFieldsChange changedFields', changedFields) //哪个filed改变了就会触发，输出改变的filed信息，可以拿value值
    console.log('onFieldsChange allFields', allFields) //哪个filed改变了，输出全部filed
    console.log(
      ' props.onChange(changedFields);',
      props.onchange(changedFields) //只是props上的方法，触发并且传值
    )
  },
  onValuesChange(_, values) {
    console.log('onValuesChange', values) //哪个filed的value 改变会触发
  },
})(Header)
